<template>
    <div class="">
      <!-- app-container -->
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true">
          <el-form-item label="赚卡查询：" prop="cardName">
            <el-input
              v-model="queryParams.cardName"
              placeholder="请输入赚卡名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="用户查询：" prop="nameOrPhone">
            <el-input
              v-model="queryParams.nameOrPhone"
              placeholder="会员昵称/手机号码"
              clearable
            />
          </el-form-item>
          <el-form-item label="评价状态：" prop="status">
            <el-select
              v-model="queryParams.status"
              filterable
              placeholder="请选择"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in statusList"
                :key="dict.id"
                :label="dict.value"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery('queryForm')"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <div class="listBox_head">
          <div>
            <el-button type="primary"  @click="addClick">新增评价</el-button>
            <el-button type="primary"  @click="handleConfig">评价配置</el-button>
          </div>
          <div>
            <el-upload
              style="margin-left: 10px;"
              class="upload-demo"
              :action="fileaction"
              :headers="headers"
              :limit="1"
              :on-success="handleFileChange">
              
              <!-- :file-list="fileList" -->
              <el-button type="primary">批量导入</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
          </div>
        </div>  
        <el-table v-loading="loading" :data="tabList" stripe border>
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="商品ID" align="center" prop="goodsId"  :show-overflow-tooltip="true" />
          <el-table-column label="赚卡名称" align="center" prop="cardName" :show-overflow-tooltip="true" />
          <el-table-column label="手机号码" align="center" prop="phone" :show-overflow-tooltip="true" />
          <el-table-column label="会员昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
          <el-table-column label="评价内容"  align="center" prop="content" :show-overflow-tooltip="true" />
          <el-table-column label="评价图片" align="center" prop="image"
            :show-overflow-tooltip="true" width="340">
            <template slot-scope="scope">
              <div class="imgBox" v-if="scope.row.imageArr.length > 0">
                <img  v-for="(item,index) in scope.row.imageArr" :src="item" alt="" :key="index" @click="handleImg(item)"/>
              </div>
              <div class="imgBoxKong" v-else> - </div>
            </template>
          </el-table-column>
          <el-table-column label="评分" align="center" prop="score" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
              <div>{{scope.row.score}}星</div>
            </template>
          </el-table-column>
          <el-table-column label="评价时间" align="center" prop="evaluateTime" :show-overflow-tooltip="true" >
          </el-table-column>
          <el-table-column label="评价来源" align="center" prop="source" :show-overflow-tooltip="true" width="100px">
            <template slot-scope="scope">
              <div v-if="scope.row.source == 1">用户</div>
              <div v-if="scope.row.source == 2">自定义</div>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
              <div v-if="scope.row.status == 1">待审核</div>
              <div v-if="scope.row.status == 2">已通过</div>
              <div v-if="scope.row.status == 3">已驳回</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="reviewClick(scope.row)"  v-if="scope.row.status == 1"
                >审核</el-button>
                <el-button size="mini" type="text" @click="handleShow(scope.row)"  v-if="scope.row.isShow == 2 && scope.row.status == 2"
                >显示</el-button>
                <el-button size="mini" type="text" @click="handleShow(scope.row)"  v-if="scope.row.isShow == 1 && scope.row.status == 2"
                >隐藏</el-button>
              <el-button size="mini" type="text" @click="reviewClick(scope.row)" v-if="scope.row.status == 3"
                >再次审核</el-button>
              <el-button size="mini" type="text" @click="delClick(scope.row)" v-if="scope.row.source == 2"
                >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        ></pagination>
      </div>
      <Dialog
        :id="id"
        :pathType="pathType"
        v-bind="$attrs"
        v-if="dialogVisible"
        :visible.sync="dialogVisible"
        @success="_handleSuccess"
      >
      </Dialog>
      <ConfigurationDialog
        v-bind="$attrs"
        v-if="ConfigurationVisible"
        :visible.sync="ConfigurationVisible"
        @success="_handleSuccess"
      ></ConfigurationDialog>
      <ReviewDialog
        :id="id"
        v-bind="$attrs"
        v-if="reviewVisible"
        :visible.sync="reviewVisible"
        @success="_handleSuccess">
      </ReviewDialog>
      <el-dialog
        title="图片"
        :visible.sync="imgVisible"
        width="70%"
        :before-close="closeImg">
        <div class="maxBox">
          <img :src="maxImg" alt="">
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="imgVisible = false">取 消</el-button>
          <el-button type="primary" @click="imgVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
    
<script>
  import {
    getList,
    delEvaluate,
    changeShow,
  } from "@/api/merchantsNFR/evaluate";
  import { getToken } from '@/utils/auth'

  import Dialog from "@/views/merchantsNFR/evaluate/components/dialog";
  import ConfigurationDialog from "@/views/merchantsNFR/evaluate/components/configurationDialog";
  import ReviewDialog from "@/views/merchantsNFR/evaluate/components/reviewDialog";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  
  export default {
    name: "",
    components: {
      Dialog,
      ConfigurationDialog,
      ReviewDialog,
      ExportExcelButton,
      
    },
    data() {
      
      var checkEndPrice = (rule, value, callback) => {
        var startPrice = parseFloat(this.queryParams.startPrice)
        var value = parseFloat(value)
        let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
        if ( startPrice >= value ) {
          return callback(new Error("只能填写大于最低售价的数值"));
        }else {
          return callback();
        }
        
      };
      return {
        fileaction: process.env.VUE_APP_BASE_API + "/order/evaluate/import",
        headers: {},//设置上传文件请求头
        maxImg: '',
        id: '',
        exportLoading: false,
        dialogId: "",
        dialogVisible: false,
        ConfigurationVisible: false, //增删 弹窗
        reviewVisible: false,
        imgVisible: false,
        // 遮罩层
        loading: false,
        // 导出遮罩层
        // 总条数
        total: 0,//状态字典数组
        //表格数据
        tabList: [],
        statusList: [
          {id: '',value: '全部'},
          {id: '1',value: '待审核'},
          {id: '2',value: '已通过'},
          {id: '3',value: '已驳回'},
        ],
        pathType: "add",
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          cardName: "", //	赚卡名称
          nameOrPhone: '', //昵称或手机
          status: '',//评价状态
        },
        rules: {
          endPrice: [
            {validator: checkEndPrice,required: true,trigger: ["change"]}
          ],
        }
      };
    },
    computed: {
      
    },
    created() {
      this.headers ={'X-Access-Token' : getToken() || ''}
      this.getList();
    },
    methods: {
      init(){
        this.queryParams.pageNum = 1
        this.queryParams.pageSize =10
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        getList(this.queryParams).then((response) => {
          response.result.records.forEach(item => {
            for (var key in item) {
              if (!item[key]) {
                item[key] = "-";
              }
            }
          });
          this.tabList = response.result.records;
          this.total = response.result.total;
          this.loading = false;
        });
      },
      // 表单重置
      reset() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
        };
        this.resetForm("queryForm");
        this.getList();
      },
      /** 搜索按钮操作 */
      handleQuery(formName) {
        //创建确定
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.queryParams.pageNum = 1;
            this.getList();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
       
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.reset();
      },
      //新增
      addClick() {
        this.dialogVisible = true
      },
      //批量配置运营活动
      handleConfig(){
        this.ConfigurationVisible = true
      },
      // 编辑
      editClick(row) {
        this.$router.push({
          path: "/merchantsNFR/addYeCard",
          query: {
            pathType: 'edit',
            id: row.id,
          },
        })
      },
      //审核
      reviewClick(row){
        this.id = row.id
        this.reviewVisible = true
      },
      //删除
      delClick(row){
        this.$confirm('是否删除此条评价', '提示', {
          confirmButtonText: '同意',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delEvaluate(row.id).then((response) => {
            this.init()
            this.getList()
            this.$message.success('删除成功')
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      //放大图片
      handleImg(item){
        this.imgVisible = true
        this.maxImg = item
      },
      closeImg(){
        this.imgVisible = false
      },
      //导入文件
      handleFileChange(res, file) {
        console.log('文件',res)
        if(res.code == 200){
          this.$message.success(res.message)
          this.reset();
        }else{
          this.$message.error(res.message);
        }

        
        // this.firstForm.individuationCardCover = res.result.url;
      },
      //批量上下架
      handleShow(row){
        var title = ''
        var isShow = ''
        if(row.isShow == 1){
          title = '是否隐藏'
          var isShow = 2
        }else if(row.isShow == 2){
          title = '是否显示'
          var isShow = 1
        }
        this.$confirm(title, '提示', {
          confirmButtonText: '同意',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
          var data = {
            id: row.id,
            isShow: isShow
          }
          changeShow(data).then((response) => {
            this.getList()
            this.$message.success('操作成功')
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
        
      },
      _handleSuccess(e) {
        //成功回调
        this.init()
        this.getList();
      },
    },
  };
  </script>
    <style scoped lang="scss">
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }
  
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }
  
  .listBox_head {
    padding: 0 0 20px 0;
    display: flex;
    justify-content: space-between;
  }
  .el-dropdown{
    margin-left: 10px;
  }
  .main_top {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      font-size: 14px;
      color: #333;
      background: #fff;
      border-radius: 6px;
      margin-bottom: 10px;
      .lef {
        display: flex;
        justify-content: flex-start;
        border: 1px solid #dfe6ec;
        .list {
          height: 40px;
          text-align: center;
          line-height: 40px;
          width: 140px;
          text-align: center;
          border-right: 1px solid #dfe6ec;
          background: #fff;
        }
        .list:nth-last-child(1) {
          border: none;
        }
        .active {
          background: #1890ff;
          color: #fff;
        }
      }
    }
  .img_box {
    width: 100px;
    height: 80px;
    border-radius: 4px;
  }
  .imgBox{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    img{
      width: 90px;
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;
    }
  }
  .imgBoxKong{
    display: flex;
    justify-content: center;
  }
  .maxBox{
    display: flex;
    justify-content: center;
    img{
      min-width: 500px;
      max-width: 700px;
    }
  }
  </style>
    